import React, { useEffect, useState } from 'react'
import { Menu, MessagePlugin, Button, Dropdown } from 'tdesign-react';
const { HeadMenu, MenuItem } = Menu;
import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom'
import { Layout } from 'tdesign-react';
const { Header, Content, Footer, Aside } = Layout;
import { Card } from 'tdesign-react';
import 'tdesign-react/es/style/index.css';
import './index.css'
import axios from 'axios'
export default function Index() {
	const navigate = useNavigate()
	const [active, setActive] = useState('0');
	const [total, setTotal] = useState(0);
	const [list, setList] = useState([])
	const [type, settype] = useState([])
	const [Xiang, setXiang] = useState(false)
	const [col, setCol] = useState('')
	const [infotypenname, setInfotypenname] = useState('')
	const [s_type, setS_type] = useState('')
	const [tabs, setTabs] = useState(1)
	const [addshijian,setAddshijian]=useState('')
	let [is_add,setIs_add]=useState(false)
	const gettype = () => {
		axios.get('http://localhost:3000/type').then(res => {
			let { code, data } = res.data
			if (code == 200) {
				settype(data)
			}
		})
	}
	const getlist = () => {
		axios.get(`http://localhost:3000/shuiju?s_type=${s_type}`).then(res => {
			let { code, data, total } = res.data
			if (code == 200) {
				setList(data)

				setTotal(total)
			}
		})
	}
	const sear = id => {
		setS_type(id._id)
		setInfotypenname(id.name)
		setCol(id.color)
		getlist()
	}
	const add=(is)=>{
		let from = {shijian:addshijian,type:s_type,is_do:is}
		axios.post(`http://localhost:3000/addren`,from).then(res=>{
			let { code, msg } = res.data
			if(code==200){
				alert('添加成功')
			}
		})
	}
	useEffect(() => {
		gettype()
		getlist()
	}, [])
	return (
		<div>
			<div className='heimy'>
				<Layout style={{ height: '100vh' }}>
					<Header>
						<HeadMenu
							theme="light"
							value={active}
							onChange={(v) => setActive(v)}
							logo={<img src="https://tdesign.gtimg.com/site/baseLogo-light.png" height="28" alt="logo" />}
							style={{
								marginBottom: 20,
							}}
						>
							<MenuItem value={'0'} onClick={() => MessagePlugin.info('click 菜单1')}>
								<span>办公</span>
							</MenuItem>
							<MenuItem value={'1'}>
								<span>客户管理</span>
							</MenuItem>
							<MenuItem value={'2'}>
								<span>商业管理</span>
							</MenuItem>
							<MenuItem value={'3'}>
								<span>项目管理</span>
							</MenuItem>
						</HeadMenu>
					</Header>
					<Layout>
						<Aside style={{ backgroundColor: '#2C3038', textAlign: "center", color: 'white', height: '100%' }}>
							<div className='lop' onClick={() => { navigate('/add') }}>创建项目<span>|&nbsp;&nbsp;&nbsp;+</span></div>
							<div className='lop'>
								<span>工作台</span>
								<span>V</span>
							</div>
							<div className='lop'>
								<span>项目</span>
								<span>
									<span onClick={() => { setXiang(!Xiang) }}>{Xiang == false ? 'V' : ''}</span>
									<span onClick={() => { setXiang(!Xiang) }}>{Xiang == false ? '' : '^'}</span>
								</span>
							</div>
							<div className={Xiang ? '' : 'no'}>
								{type.map((item, index) => {
									return <ul key={item._id}>
										<li onClick={() => { sear(item) }}>{item.name}</li><br /><br />
									</ul>
								})}
							</div>
							<div className='lop'>
								<span>统计分析</span>
								<span>V</span>
							</div>
							<div className='lop'>
								<span>归档项目</span>
								<span>V</span>
							</div>
							<div className='lop'>
								<span>标签</span>
								<span>V</span>
							</div>
							<div className='lop'>
								<span>回收站</span>
								<span>V</span>
							</div>
						</Aside>
						<Layout>
							<Content>
								<div className='hei6'>
									<span> <span style={{ color: col }}>{infotypenname}</span></span>
									<br />
									<div className='renwus'>
										<span onClick={() => { setTabs(1) }} className={tabs == 1 ? 'falsetabs' : ''}>任务面饭</span>
										<span onClick={() => { setTabs(2) }} className={tabs == 2 ? 'falsetabs' : ''}>附件</span>
										<span onClick={() => { setTabs(3) }} className={tabs == 3 ? 'falsetabs' : ''}>任务统计</span>
										<span onClick={() => { setTabs(4) }} className={tabs == 4 ? 'falsetabs' : ''}>归档任务</span>
									</div>
								</div>
								<div className={tabs == 1 ? 'll' : 'no'}>
									{list.length == 0 ? <Card
														title=''
														hoverShadow
														style={{
															width: '280px',
														}}
													>
														<span style={{ color: 'blue' }}>+新建列表</span>
													</Card> : <div>
										{
											list.map((item, index) => {
												return <div key={item._id} className='huisussu'>
													<Card
														title='要做'
														actions={
															<a
																href={null}
																// onClick={}
																style={{
																	cursor: 'pointer',
																}}
															>
																<Dropdown
																	direction="right"
																	hideAfterItemClick
																	options={[
																		{
																			content: '删除',
																			value: item._id
																		},
																		{
																			content: '归档',
																			value: 2
																		}
																	]}
																	placement="bottom-left"
																	trigger="hover"
																>
																	<Button>
																		更多...
  																	</Button>
																</Dropdown>
															</a>
														}
														hoverShadow
														style={{
															width: '280px',
														}}
													>
														{item.is_do == 0 ? <div>
															{item.shijian}
														</div> : ''}
														{is_add==false?<span style={{ color: 'blue' }} onClick={()=>{setIs_add(!is_add)}}>+新建任务</span>:
														<span>
															<textarea name="" id="" value={addshijian} onChange={(e)=>{setAddshijian(e.target.value)}} cols="30" rows="4"></textarea>
															<button onClick={()=>{add(item.is_do)}}>确定</button>
															<button onClick={()=>{setIs_add(!is_add)}}>取消</button>
														</span>}
													</Card>&nbsp;&nbsp;
												<Card
														title='在做'
														actions={
															<a
																href={null}
																style={{
																	cursor: 'pointer',
																}}
															>
																<Dropdown
																	direction="right"
																	hideAfterItemClick
																	options={[
																		{
																			content: '删除',
																			value: item._id
																		},
																		{
																			content: '归档',
																			value: 2
																		}
																	]}
																	placement="bottom-left"
																	trigger="hover"
																>
																	<Button>
																		更多...
  																	</Button>
																</Dropdown>
															</a>
														}
														hoverShadow
														style={{
															width: '280px',
														}}
													>
														{item.is_do==1?<div>
															{item.shijian}
														</div> : ''}
														<span style={{ color: 'blue' }}>+新建任务</span>
													</Card>&nbsp;&nbsp;
												<Card
														title='待定'
														actions={
															<a
																href={null}
																style={{
																	cursor: 'pointer',
																}}
															>
																<Dropdown
																	direction="right"
																	hideAfterItemClick
																	options={[
																		{
																			content: '删除',
																			value: item._id
																		},
																		{
																			content: '归档',
																			value: 2
																		}
																	]}
																	placement="bottom-left"
																	trigger="hover"
																>
																	<Button>
																		更多...
  																	</Button>
																</Dropdown>
															</a>
														}
														hoverShadow
														style={{
															width: '280px',
														}}
													>
														{item.is_do == 1 ? <div>
															{item.shijian}
														</div> : ''}
														<span style={{ color: 'blue' }}>+新建任务</span>
													</Card>&nbsp;&nbsp;
												<Card
														title=''
														hoverShadow
														style={{
															width: '280px',
														}}
													>
														<span style={{ color: 'blue' }}>+新建列表</span>
													</Card>
												</div>
											})
										}
									</div>}
								</div>
								<div className={tabs == 3 ? 'l2' : 'no'}>
									<img src="a.jpg" width='100%' alt="" />
									<img src="b.jpg" width='100%' alt="" />
									<div className='hpi'>
										&nbsp;&nbsp;&nbsp;<span style={{ color: 'blue' }}>|</span>&nbsp;&nbsp;成员完成情况<br />
										<table className='table'>
											<tbody>
												<tr className=''>
													<td>姓名</td>
													<td>任务总数</td>
													<td>已完成数</td>
													<td>未完成数</td>
													<td>逾期数</td>
													<td>完成率</td>
												</tr>
												<tr className='lo'>
													<td>创云</td>
													<td>8</td>
													<td>3</td>
													<td>5</td>
													<td>--</td>
													<td style={{ color: 'blue' }}>38</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
								<div className={tabs == 4 ? 'l4' : 'no'}>
									{'abc' == 'abc' ? <div>还没有归档任务了</div> : <div></div>}
								</div>
							</Content>
						</Layout>
					</Layout>
				</Layout>
			</div>
		</div>
	)
}
